<template>
  <lay-layer
    title="编辑"
    v-model="visible"
    :shade="true"
    :shadeClose="false"
    :shadeOpacity="0.3"
    :maxmin="true"
    :area="['500px']"
    :teleportDisabled="false"
    :btn="actionBtn"
  >
    <Loading :loading="isLoading">
      <lay-form
        :model="formState"
        ref="formRef"
        size="xs"
        style="width: 90%; margin-top: 15px"
      >
        <lay-form-item label="角色名称" prop="name" required>
          <lay-input
            type="text"
            v-model="formState.name"
            placeholder="角色名称"
            allow-clear
          />
        </lay-form-item>

        <lay-form-item label="上级角色" prop="pid" required>
          <lay-tree-select
            v-model="formState.pid"
            allow-clear
            :data="roleList"
            placeholder="请选择"
            :search="true"
            style="width: 100%"
            :default-expand-all="true"
            :replaceFields="{
              id: 'role_id',
              title: 'name',
            }"
          >
          </lay-tree-select>
        </lay-form-item>

        <lay-form-item label="菜单权限" prop="menus" required>
          <lay-panel shadow="hover">
            <lay-tree
              :checkStrictly="true"
              v-model:checkedKeys="formState.menus"
              :data="menuList"
              :showCheckbox="true"
              :showLine="true"
              :default-expand-all="true"
              style="max-height: 320px; overflow: auto"
            >
              <!-- 显示名称 -->
              <template #title="{ data }">
                {{ data.name }}
              </template>
            </lay-tree>
          </lay-panel>
        </lay-form-item>

        <lay-form-item label="排序" prop="sort" required>
          <lay-input-number v-model="formState.sort" placeholder="排序值" />
        </lay-form-item>
      </lay-form>
    </Loading>
  </lay-layer>
</template>
<script setup>
import { ref, nextTick } from "vue";
import { msgSuccess, msgError } from "@/utils/message";
import { one_assign, addDisabledToNode } from "@/utils/tool";
import { edit } from "@/api/user/role";

// 定义抛出的事件名称
const emit = defineEmits(["callback"]);

// 定义动态数据
const isLoading = ref(false);
const formRef = ref(undefined);
// 表单信息
const formState = ref({
  name: "",
  pid: 0,
  menus: [],
  sort: 100,
});
const visible = ref(false);
const actionBtn = ref([
  {
    text: "提交",
    callback: () => {
      handleSubmit();
    },
  },
  {
    text: "取消",
    callback: () => {
      visible.value = false;
    },
  },
]);
// 权限列表
const roleList = ref([]);
// 菜单列表
const menuList = ref([]);
// 当前信息
const detail = ref(undefined);

// 控制显示
const show = (data, menu_list, role_list) => {
  menuList.value = menu_list;

  visible.value = true;
  detail.value = data;
  //初始化表单信息
  nextTick(() => {
    formRef.value.reset();
    formState.value = one_assign(formState.value, detail.value, true);
    const new_roleList = [
      {
        role_id: 0,
        pid: 0,
        name: "顶级角色",
      },
      ...role_list,
    ];
    roleList.value = addDisabledToNode(new_roleList, detail.value["role_id"], "role_id");
  });
};

// 提交
const handleSubmit = () => {
  if (formState.value.name == "" || formState.value.name == null) {
    return msgError("角色名称不能为空");
  }

  if (formState.value.menus.length < 1) {
    return msgError("至少选择一个菜单权限");
  }
  if (formState.value.sort == "") {
    return msgError("排序值必填");
  }

  isLoading.value = true;
  edit({ roleId: detail.value.role_id, form: formState.value })
    .then((result) => {
      if (result.status == 200) {
        msgSuccess(result.message);
        visible.value = false;
      } else {
        msgError(result.message);
      }
    })
    .finally(() => {
      emit("callback", "");
      isLoading.value = false;
    });
};

// 导出方法/属性给父组件
defineExpose({ show });
</script>
